<template>
	<view>
		<view class="tab-box">
			<view class="tab-item" v-for="(item,index) in tabArr" :key="index" :class="tabIndex == index?'tab-item-active':''" @click="tabSelect(index)">{{ item.name }}</view>
		</view>
		<view class="order-content">
			<view class="item-order">
				<view class="order-label border-btm">
					<view class="order-id">223344444</view>
					<view class="order-status">待自提</view>
				</view>
				<view class="order-detail">
					<view class="order-left-img"><image src="../../../static/images/default/screen_icon_new.png" mode=""></image></view>
					<view class="order-right-detail">
						<view class="order-name">男皮衣</view>
						<view class="order-money-box">
							<view>团单金额 <text>¥ 269</text></view> |
							<view>佣金<text>¥ 69</text></view>
						</view>
					</view>
				</view>
				<view class="order-label border-top">
					<view></view>
					<view class="order-count">合计佣金：¥26.9</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabArr: [
					{
						name: '全部',
						status: 0,
					},
					{
						name: '待确认',
						status: 0,
					},
					{
						name: '已确认',
						status: 0,
					},
					{
						name: '无效',
						status: 0,
					}
				],
				tabIndex: 0
			}
		},
		methods: {
			tabSelect(index) {
				if(index == this.tabIndex) return 
				this.tabIndex = index
			}
		}
	}
</script>

<style scoped>
.tab-box {
	background-color: white;
	width: 100%;
	padding: 0 55rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.tab-item {
	padding: 27rpx 0;
	font-size: 27rpx;
	color: #555555;
	font-weight: bold;
}
.tab-item-active {
	border-bottom: solid 4rpx #fe7e5c !important;
	color: #fe7e5c !important;
}
.order-content {
	display: flex;
	flex-direction: column;
	padding: 20rpx;
	width: 100%;
	box-sizing: border-box;
}
.item-order {
	background-color: white;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}
.order-label {
	width: 100%;
	
	padding: 27rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order-id {
	font-size: 20rpx;
	color: #5a5a5a;
}
.order-status {
	font-size: 22rpx;
	color: #fd8c6f;
	font-weight: 500;
}
.order-count {
	font-size: 24rpx;
	color: #8d8d8d;
	font-weight: bold;
}
.border-top {
	border-top: solid 2rpx #dedede;
}
.border-btm {
	border-bottom: solid 2rpx #dedede;
}
.order-detail {
	display: flex;
	padding: 20rpx 30rpx;
	width: 100%;
	box-sizing: border-box;
}
.order-left-img {
	width: 85rpx;
	height: 128rpx;
	flex-shrink: 0;
	margin-right: 30rpx;
}
.order-left-img image {
	width: 100%;
	height: 100%;
}
.order-right-detail {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.order-name {
	font-size: 25rpx;
	color: #121212;
	font-weight: 500;
}
.order-money-box {
	width: 100%;
	display: flex;
	font-size: 24rpx;
	color: #8b8b8b;
	margin-top: auto;
	justify-content: flex-end;
}
.order-money-box > view {
	margin: 0 5rpx;
}
</style>
